<template>
	<view class="release-detail">
		<NavBar title="出库详情"/>
		<view class="order-address">
			<view class="sn"> 订单编号：{{ orderInfo.order_sn }} </view>
			<view class="name"> 收货人：{{ orderInfo.addressee_name }} </view>
			<view class="mobile"> 联系方式：{{ orderInfo.addressee_telphone }} </view>
			<view class="address"> 收货地址：{{ orderInfo.address }} </view>
		</view>
		<view class="goods-list" v-if="goodsList.length">
			<view class="goods" v-for="item in goodsList" :key="item">
				<view class="goods-name"> {{ item.goods_name }} </view>
				<view class="sku"> 商品sku：{{ item.sku }} </view>
				<view class="goods-price"> 商品金额：<text class="red"> {{ item.price }} </text> </view>
				<view class="num"> 出库数量：<text class="bold"> {{ item.num }} </text> 件 </view>
			</view>
		</view>
		<view class="btn-box">
			<wd-button class="btn" size="small" @tap="outWarehouseRef.open()"> 出 库 </wd-button>
		</view>
		<OutWarehouse ref="outWarehouseRef" :transportType="orderInfo.transport_type" @action="submit"/>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import { outHouseDetailApi, outHouseApi } from '@/api'
	import { useUserStore } from '@/store'
	import OutWarehouse from './components/OutWarehouse.vue'
	const outWarehouseRef = ref()
	const goodsList = ref([])
	const orderInfo = ref({
		order_sn: '',
		transport_type: '', // 1-邮寄发货；2-店铺自提；3-送至第三方平台仓库；
		addressee_name: '',
		addressee_telphone: '',
		address: ''
	})
	const getDetail = (order_sn) => {
		outHouseDetailApi({order_sn}).then(res => {
			goodsList.value = res.lists
			orderInfo.value = res.orderinfo
		})
	}
	const submit = (obj) => {
		const { userInfo } = useUserStore()
		const { order_sn, transport_type } = orderInfo.value
		const params = {
			order_sn,
			transport_type,
			uid: userInfo.uid,
			...obj
		}
		outHouseApi(params).then(res => {
			uni.showToast({
				icon: 'none',
				title: '出库成功'
			})
			uni.navigateBack()
		}).catch(err => {
			outWarehouseRef.value.close()
			uni.showToast({
				icon: 'none',
				title: err.msg
			})
		})
	}
	onLoad(({order_sn}) => {
		getDetail(order_sn)
	})
</script>

<style lang="scss" scoped>
	.release-detail {
		padding-top: 20rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 50px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
		.order-address {
			padding: 20rpx;
			gap: 10rpx;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
		.goods-list {
			gap: 20rpx;
			display: flex;
			flex-direction: column;
			padding: 20rpx 24rpx;
			.goods {
				gap: 10rpx;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				border-radius: 10px;
				background-color: #fff;
				.goods-name {
					font-size: 32rpx;
					font-weight: bold;
				}
				.goods-price>.red{
					color: red;
				}
				.num>.bold {
					font-weight: bold;
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			padding: 10px 12px;
			background-color: #fff;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 10px);
			padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
			.btn {
				width: 100%;
			}
		}
	}
</style>
